<template>
    <div style="height:200px;width:200px;position: relative;">
        <div :id="idString" style="height:200px;width:200px;">
        </div>
        <div class="title">
                <div v-if="title1 !==''" class="title1">{{ title1 }}<span class="unit">{{ unit }}</span></div>
                <div class="title2">{{ title2 }}</div>
            </div>
    </div>

</template>

<script>
  import * as echarts from 'echarts'
  let PieColor = [
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#F3B407'
      },
      {
        offset: 1,
        color: '#F27011'
      }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#82BFFF'
      },
      {
        offset: 1,
        color: '#0D4DF2'
      }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#9C99FF'
      },
      {
        offset: 1,
        color: '#33317E'
      }
    ]),

    '#009DFF', '#00e473', '#395CFE', '#2EC7CF', '#733DFF', '#966EFF', '#7fdefe']

  let colorList = PieColor
  export default {
    props: {
      text: String,
      unit: {
        type: String,
        default: '台'
      },
      seriesData: {
        type: Array,
        default: () => {
          return [{
                    name: '物理机',
                    value: 0
                    // itemStyle: {
                    //   emphasis: {
                    //     shadowBlur: 10,
                    //     shadowColor: 'rgba(242,112,17,.5)'
                    //   }
                    // }
                  }, {
                    name: '云主机',
                    value: 0
                    // itemStyle: {
                    //   emphasis: {
                    //     shadowBlur: 10,
                    //     shadowColor: 'rgba(130,191,255,.5)'
                    //   }
                    // }
                  },
                  {
                    name: '应用容器',
                    value: 0
                    // itemStyle: {
                    //   emphasis: {
                    //     shadowBlur: 10,
                    //     shadowColor: 'rgba(156,153,255,.5)'
                    //   }
                    // }
                  }]
        }
      }
    },
    data () {
      return {
        idString: '',
        title1: '',
        title2: '资源统计'
      }
    },
    created () {
      this.idString = 'chart_' + Math.random().toString(32).substr(6)
    },
    computed: {
      chartOption () {
        return {
          // backgroundColor: '#000000',
          left: 10,
          top: 10,
          bottom: 10,
          right: 10,
          title: {
            show: false,
            text: ' ',
            subtext: '资源统计',
            textAlign: 'center',
            textStyle: {
              color: '#333333',
              fontSize: 14

            },
            subtextStyle: {
              fontSize: 20,
              color: ['#333333']
            },
            x: '49%',
            y: '40%'
          },
          series: [{
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                },
                borderColor: '#ffffff',
                borderWidth: 2,
                borderRadius: 4
              }
            },
            type: 'pie',
            // clockWise: false ,
            // roseType: 'radius',
            // roseType: 'area',
            // selectedOffset: 10,
            // selectedMode: true,
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#34569D'
                }
              }
            },
            label: {
              normal: {
                show: false
                // formatter: function (params, ticket, callback) {
                //   let total = Total
                //   let percent = 0
                //   percent = ((params.value / total) * 100).toFixed(1)
                //   return '{name|' + params.name + '\n}{value|' + params.value + '}{percent|' + params.percent.toFixed(0) + '%}'
                // },
                // padding: [0, -5, 0, -5]
              }
            },
            emphasis: {
              scaleSize: 4
            },
            data: this.seriesData
          }, {
            itemStyle: {
              normal: {
                color: '#ffffff',
                shadowBlur: 10,
                shadowColor: 'rgba(51,49,126,0.15)'
              }
            },
            type: 'pie',
            hoverAnimation: false,
            radius: ['55%', '85%'],
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 1
            }],
            z: -1
          }]
        }
      }
    },
    async mounted () {
      const myChart = echarts.init(document.getElementById(this.idString))
      myChart.setOption(this.chartOption)
      myChart.on('mouseover', (params) => {
        if (params.componentType === 'series') {
          myChart.dispatchAction({ type: 'downplay', seriesIndex: 0 })
          if (params.seriesType === 'pie' && params.name) {
            myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: params.dataIndex })
            this.title1 = parseInt(params.value)
            this.title2 = params.name
            this.$emit('input', params.dataIndex)
            console.log(params)
          }
        }
      })
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 999999;
    .title1{
      font-size: 30px;
      font-family: Oxanium, Oxanium-Bold;
      line-height: 1;
      font-weight: 700;
      position: relative;
      .unit {
        position: absolute;
        font-size:12px;
        color: #999999;
      }
    }
    .title2 {
      font-size:16px;
    }
}
</style>
